<template>
  <div>
    <el-table
      :data="ordersList"
      border
      stripe
      style="width: 100%">
      <el-table-column
        label="#"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="order_number">
      </el-table-column>
      <el-table-column
        label="订单价格"
        prop="order_price"
        width="130px">
      </el-table-column>
      <el-table-column
        label="是否付款"
        prop="pay_status"
        width="130px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.pay_status === '0' ?'danger':'success'">
            {{ scope.row.pay_status === '0' ? '未付款' : '已付款' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="是否发货"
        prop="is_send"
        width="130px">
      </el-table-column>
      <el-table-column
        :formatter="formatter"
        label="下单时间"
        prop="create_time"
        width="200px">
      </el-table-column>
      <el-table-column
        label="操作"
        width="130px">
        <template>
          <el-button circle icon="el-icon-edit" type="primary" @click="address"></el-button>
          <el-button circle icon="el-icon-location-information" type="success" @click="logistics"></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { formatTime } from '@/utils/dayjs'

const {
  mapState,
  mapActions,
  mapMutations
} = createNamespacedHelpers('orders')

export default {
  name: 'OrdersTable',
  data () {
    return {}
  },
  methods: {
    ...mapActions(['getLogisticsList']),
    ...mapMutations(['setOrdersAddressVisible']),
    address () {
      this.setOrdersAddressVisible()
    },
    logistics () {
      this.getLogisticsList()
    },
    // 渲染时间
    formatter (row, column, cellValue) {
      // console.log(row, column, cellValue)
      const date = new Date(cellValue * 1000)
      // console.log(formatTime(date))
      return formatTime(date)
    }
  },
  computed: {
    ...mapState(['ordersList'])
  },
  components: {}
}
</script>

<style scoped>

</style>
